<template>
  <div @click.stop="$emit('expand')" :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]">
    <BasicTitle :helpMessage="helpMessage" normal>
      <template v-if="title">
        <BasicArrow
          v-if="canPreExpan"
          :deg="deg"
          up
          :icon="icon"
          :iconStyle="iconStyle"
          :expand="show"
        />
        <span
          :class="{
            title: true,
            'ml-2': canPreExpan,
          }"
        >
          {{ title }}
        </span>
      </template>
      <template v-else>
        <slot name="title" v-bind="{ expand: show }"></slot>
      </template>
    </BasicTitle>
    <div :class="`${prefixCls}__action`">
      <slot name="action"></slot>
      <BasicArrow
        v-if="canExpan"
        :icon="icon"
        :deg="deg"
        up
        :iconStyle="iconStyle"
        :expand="show"
      />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, StyleValue, PropType } from 'vue';
  import { BasicArrow, BasicTitle } from '/@/components/Basic';

  const props = {
    prefixCls: { type: String },
    helpMessage: {
      type: [Array, String] as PropType<string[] | string>,
      default: '',
    },
    title: { type: String },
    show: { type: Boolean },
    icon: { type: String, default: '' },
    deg: { type: Number },
    iconStyle: { type: Object as PropType<StyleValue> },
    canExpan: { type: Boolean },
    canPreExpan: { type: Boolean },
  };

  export default defineComponent({
    components: { BasicArrow, BasicTitle },
    inheritAttrs: false,
    props,
    emits: ['expand'],
  });
</script>
